<template>
  <el-container>
    <el-header style="border-bottom: 2px solid #dee2e7">
      <h2 style="color: #50b4ff">主诉</h2>
    </el-header>
    <el-main style="padding: 0;height:100%;overflow:hidden">
      <div style="height:100%;-y:auto;">
        <el-row :gutter="0" style="height:100%;margin:0">
          <el-col :span="5" style="height:100%">
            <div style="border-right:1px solid #e7eaed;height:100%">
              <el-checkbox-group v-model="typeChosen">
                <el-checkbox v-for="t in types" :label="t.name" :key="t.name"></el-checkbox>
              </el-checkbox-group>
            </div>
          </el-col>
          <el-col :span="19" style="height:100%">
            <div style="overflow-y: auto;height:60%;border-bottom:1px solid #e7eaed;">
              <div style="display:flex;flex-wrap:wrap;flex-direction:column;height:100%;align-content:flex-start;">
                <div v-for="(s,i) in tempOpen.chiefComplaint.data" :key="i" :class="['i-div', s.chosen ? 'i-div-checked' : '', s.changing ? 'changing' : 'changed']">
                  <label @click.stop="chooseItem(s)">
                    <span aria-checked="mixed" class="c-input el-checkbox__input" :class="{ 'is-checked' : s.chosen == true }">
                      <span class="el-checkbox__inner"></span>
                    </span>
                    <el-tooltip :content="title(s)" placement="top">
                      <span class="el-checkbox__label">{{ title(s) }}</span>
                    </el-tooltip>
                  </label>
                  <span class="myButton">
                    <el-button class="c-button" @click.stop="changeItem(i)">{{ s.changing ? '完成' : '修改' }}</el-button>
                    <el-button class="f-button" style="padding: 2px 10px" @click.stop="showFollow(s)">伴随</el-button>
                  </span>
                  <i class="el-icon-close" @click="remove(i)"></i>
                  <ul v-show="s.changing">
                    <li>
                      <span>部位</span>
                      <span style="max-width: 170px">
                        <el-tooltip v-if="s.part && s.part.length > 0" :content="s.part.map(a => dictIndex.complex.DTMPartType010[a]).join(',')" placement="top">
                          <el-tag v-for="(e, index) in s.part" :key="index" size="mini" closable @close="removePart(s, index)">{{ showDict(e) }}</el-tag>
                        </el-tooltip>
                      </span>
                      <el-button size="mini" @click="choosePart(s)">选择</el-button>
                      <!-- <el-select ref="part" size="mini" v-model="s.part" placeholder="请选择">
                        <el-option label="腹部" value="腹部"></el-option>
                        <el-option label="上腹" value="上腹"></el-option>
                        <el-option label="头部" value="头部"></el-option>
                      </el-select> -->
                    </li>
                    <li>
                      <span>症状</span>
                      <el-select filterable ref="symptom" size="mini" v-model="s.symptom" placeholder="请选择">
                        <el-option label="无" value=""></el-option>
                        <el-option v-for="(e, index) in dict.simple.DTMCC020" :key="index" :label="e.itemName" :value="e.itemCode"></el-option>
                      </el-select>
                    </li>
                    <li>
                      <span>性质</span>
                      <el-select filterable ref="character" size="mini" v-model="s.character" placeholder="请选择">
                        <el-option label="无" value=""></el-option>
                        <el-option v-for="(e, index) in dict.simple.DTMCC030" :key="index" :label="e.itemName" :value="e.itemCode"></el-option>
                      </el-select>
                    </li>
                    <li>
                      <span>程度</span>
                      <el-select ref="level" size="mini" v-model="s.level" placeholder="请选择">
                        <el-option label="无" value=""></el-option>
                        <el-option v-for="(e, index) in dict.simple.DTMCC040" :key="index" :label="e.itemName" :value="e.itemCode"></el-option>
                      </el-select>
                    </li>
                    <li>
                      <span>时间</span>
                      <el-row :gutter="10">
                        <el-col :span="12">
                          <el-input ref="time" @focus="showKeyboard" @blur="hiddenKeyboard" @change="trim(s)" size="mini" v-model="s.time" placeholder="请输入内容"></el-input>
                          <!-- <keyboard class="keyboard" style="visibility: hidden"
                            v-model="s.time"
                            @doubleZero="doubleZero(s)"
                            @close="close"
                            :layouts="['123|456|789|.0{00:doubleZero}|{X:close}{<=:backspace}']"
                            :maxlength="16"
                          ></keyboard> -->
                        </el-col>
                        <el-col :span="12">
                          <el-select size="mini" v-model="s.unit" placeholder="请选择">
                            <el-option label="无" value=""></el-option>
                            <el-option v-for="(e, index) in dict.simple.DTMCC050" :key="index" :label="e.itemName" :value="e.itemCode"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                    </li>
                  </ul>
                </div>
                <el-button @click="add" icon="el-icon-plus" size="mini" style="width: 300px;height:30px;margin: 8px 10px">添加</el-button>
              </div>
            </div>
            <div style="height: 40%">
              <div v-if="chosenFollow" >
                <h6 style="text-align:center;margin: 10px;">{{ followParent + ' ' }}并伴随着以下症状</h6>
                <el-row :gutter="20" v-for="(e, i) in chosenFollow" :key="i">
                  <el-col :span="5">
                      <el-tooltip v-if="e.part && e.part.length > 0" :content="e.part.map(a => dictIndex.complex.DTMPartType010[a]).join(',')" placement="top">
                        <el-tag v-for="(ele, index) in e.part" :key="index" size="mini" closable @close="removePart(e, index)">{{ showDict(ele) }}</el-tag>
                      </el-tooltip>
                    <!-- <span style="max-width: 270px">
                    </span> -->
                    <el-button size="mini" @click="choosePart(e)">选择</el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-select filterable ref="f-symptom" size="mini" v-model="e.symptom" placeholder="症状">
                      <el-option label="无" value=""></el-option>
                      <el-option v-for="(d, index) in dict.simple.DTMCC020" :key="index" :label="d.itemName" :value="d.itemCode"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="3">
                    <el-select filterable ref="f-character" size="mini" v-model="e.character" placeholder="性质">
                      <el-option label="无" value=""></el-option>
                      <el-option v-for="(d, index) in dict.simple.DTMCC030" :key="index" :label="d.itemName" :value="d.itemCode"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select filterable ref="f-level" size="mini" v-model="e.level" placeholder="程度">
                      <el-option label="无" value=""></el-option>
                      <el-option v-for="(d, index) in dict.simple.DTMCC040" :key="index" :label="d.itemName" :value="d.itemCode"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="3">
                    <el-input ref="f-time" @focus="showKeyboard" @blur="hiddenKeyboard" @change="trim(e)" size="mini" v-model="e.time" placeholder="时间"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-select size="mini" v-model="e.unit" placeholder="时间单位">
                      <el-option label="无" value=""></el-option>
                      <el-option v-for="(d, index) in dict.simple.DTMCC050" :key="index" :label="d.itemName" :value="d.itemCode"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="2">
                    <el-button @click="removeFollow(i)" icon="el-icon-minus" size="small"></el-button>
                  </el-col>
                </el-row>
                <el-row>
                  <el-button @click="addFollow" icon="el-icon-plus" size="small"></el-button>
                </el-row>
              </div>
              <!-- <table style="width:100%">
                <thead>
                  <tr>
                    <th>部位</th>
                    <th>症状</th>
                    <th>性质</th>
                    <th>程度</th>
                    <th>时间</th>
                    <th>时间单位</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in chosenFollow" :key="index">
                    <td>{{item.part}}</td>
                    <td>{{item.symptom}}</td>
                    <td>{{item.character}}</td>
                    <td>{{item.level}}</td>
                    <td>{{item.time}}</td>
                    <td>{{item.unit}}</td>
                  </tr>
                </tbody>
              </table> -->
            </div>
          </el-col>
        </el-row>
      </div>
      <keyboard ref="k1" :targetEvent="targetEvent" @stopHidden="stopHidden" />
      <el-dialog title="选择部位" :visible.sync="partDialog">
        <el-transfer
          filterable
          :filter-method="filterMethod"
          :titles="['待选', '已选']"
          filter-placeholder="请输入部位"
          v-model="partChoosing.part"
          :props="{
            key: 'itemCode',
            label: 'itemName'
          }"
          :data="dict ? dict.complex.DTMPartType010 : []">
        </el-transfer>
        <div slot="footer" class="dialog-footer">
          <el-button @click="partDialog = false">关闭</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
// import keyboard from "vue-keyboard"
import keyboard from "@/components/Keyboard"
import { mapGetters } from 'vuex'

export default {
  name: "chiefComplaint",
  components: {
    keyboard
  },
  data() {
    return {
      partDialog: false,
      form: {
        part: '',
        symptom: '',
        character: '',
        level: '',
        time: '',
        unit: ''
      },
      types: [
        {
          name: "肺炎"
        },
        {
          name: "肺水肿"
        },
        {
          name: "肺栓塞"
        },
        {
          name: "肺癌"
        }
      ],
      typeChosen: ["肺栓塞", "肺癌"],
      chosenFollow: null,
      followParent: '',
      partChoosing: {
        part: []
      },
      clickFlag: null,
      targetEvent: null,
    }
  },
  methods: {
    removePart(e, i) {
      e.part.splice(i, 1)
    },
    choosePart(item){
      this.partDialog = true
      this.partChoosing = item
    },
    showDict(code) {
      // let _name = this.dictIndex.complex.DTMPartType010[code].split('-')
      // return _name[_name.length - 1]
      return this.dictIndex.complex.DTMPartType010[code]
    },
    filterMethod(query, item) {      
      if (query && item) {
        // return item.attributeValue1.indexOf(query) > -1 || item.attributeValue2.indexOf(query) > -1 || item.attributeValue3.indexOf(query) > -1 || item.itemName.indexOf(query) >-1
        return item.itemName.indexOf(query) >-1
      }
      return true
    },
    trimNull(param) {
      return param ? param : ''
    },
    title(s) {
      return (s.part && s.part.length > 0 ? s.part.map(e => this.dictIndex.complex.DTMPartType010[e]).join(',') : '') + this.trimNull(this.dictIndex.simple.DTMCC040[s.level]) + this.trimNull(this.dictIndex.simple.DTMCC030[s.character]) + this.trimNull(this.dictIndex.simple.DTMCC020[s.symptom]) + this.trimNull(s.time) + this.trimNull(this.dictIndex.simple.DTMCC050[s.unit])
    },
    trim(s) {
      let time = parseFloat(s.time)
      if (isNaN(time) || time == 0) {
        this.$set(s, 'time', '')
      }
    },
    chooseItem(item) {
      this.$set(item, 'chosen', !item.chosen)
    },
    showFollow(item) {
      this.followParent = this.title(item)
      this.chosenFollow = item.follow
    },
    changeItem(index) {
      if (this.tempOpen.chiefComplaint.data[index].changing) {
        this.$set(this.tempOpen.chiefComplaint.data[index], 'changing', false)
      } else {
        this.tempOpen.chiefComplaint.data.forEach((e, i) => {
          if (i == index) {
            this.$set(e, 'changing', true)
            this.chosenFollow = null
          } else {
            this.$set(e, 'changing', false)
          }
        })
      }
    },
    doubleZero(s) {
      this.$set(s, 'time', this.trimNull(s.time) + '00')
    },
    close() {
      if (this.keyboardOpened) {
        this.keyboardOpened.style.visibility = 'hidden'
      }
    },
    remove(i) {
      this.tempOpen.chiefComplaint.data.splice(i ,1)
    },
    removeFollow(i) {
      this.chosenFollow.splice(i ,1)
    },
    showKeyboard(event) {
      let rect = event.target.getBoundingClientRect()
      if (this.targetEvent) {
        let _rect = this.targetEvent.target.getBoundingClientRect()
        if (rect.x == _rect.x && rect.y == _rect.y) {
          this.$refs.k1.$el.style.visibility = 'visible'
          return
        }
      }
      this.targetEvent = event
      this.$refs.k1.$el.style.top = (rect.y - 20) + 'px'
      this.$refs.k1.$el.style.left = rect.x + 'px'
      this.$refs.k1.$el.style.visibility = 'visible'
    },
    hiddenKeyboard(event) {
      setTimeout(() => {
        // console.log(this.clickFlag)
        if (!this.clickFlag) {
          this.$refs.k1.$el.style.visibility = 'hidden'
        } else {
          event.target.focus()
          this.clickFlag = false
        }
      }, 200)
    },
    stopHidden() {
      // console.log('stop')
      this.clickFlag = true
    },
    add() {
      this.tempOpen.chiefComplaint.data.push({
        symptom: '',
        follow: [],
        changing: true
      })
    },
    addFollow() {
      this.chosenFollow.push({})
    }
  },
  mounted() {
  },
  computed: {
    ...mapGetters([
      'dict',
      'dictIndex',
      'tempOpen'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-dialog {
    width: 600px;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.keyboard {
  position:fixed;
  border:1px solid #e5e5e5;
  padding: 2px;
  background-color: white;
  z-index: 100;
  visibility: hidden;
}
.c-input {
  margin-left: 15px;
}
.changed {
  height: 35px;
}
.changing {
  height: 223px;
}
.i-div {
  margin: 10px 0px 0px 10px;
  padding: 5px 5px;
  border: 1px solid #dcdfe6;
  width: 300px;
  position: relative;
  label {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    .el-checkbox__label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      width: 220px;
    }
  }
  .myButton {
    position: absolute;
    right: 30px;
    top: 5px;
    visibility: hidden;
  }
  .el-icon-close {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor:pointer;
    color: #909399;
    border-radius: 50%;
  }
  .el-icon-close:hover {
    color: white;
    background-color: #909399;
  }
}
.el-checkbox {
  margin: 0px 10px;
  padding: 5px 5px;
  display: block;
}
.i-div-checked {
  background-color: #f2faff;
}
.i-div:hover {
  background-color: #f2faff;
  .myButton {
    visibility: visible;
  }
}
.c-button {
  padding: 2px 10px;
  // visibility: hidden;
}
ul {
  li {
    list-style-type: none;
    margin: 5px 10px;
    display: flex;
    align-items: center;
    span {
      margin-right: 10px;
      white-space: nowrap;
      display: inline-block;
    }
  }
  padding: 5px 0px;
  margin: 5px 0px;
  border-top: 1px solid #cfd4e1;
}

tbody {
  td {
    text-align: center;
  }
}
.el-row {
  width: 100%;
  margin: 10px 0 0 5px;
}
</style>